<template>
    <view class="container">
        <!-- 内容区域 -->
        <view class="content">
            <!-- 通知标题 -->
            <view class="title-container">
                <text class="title">{{ announcementDetail.title }}</text>
            </view>

            <!-- 发布时间 -->
            <view class="time-container">
                <text class="publish-time">发布时间：{{ announcementDetail.publishTime }}</text>
            </view>

            <!-- 富文本内容 -->
            <view class="rich-text-container">
                <rich-text :nodes="announcementDetail.content"></rich-text>
            </view>
        </view>
    </view>
</template>

<script>
import {getInfo } from '../../api/announcement';
export default {
    name: "AnnouncementDetail",
    data() {
        return {
            announcementDetail: {
                id: 0,
                title: '',
                publishTime: '',
                content: '' // 富文本内容
            }
        };
    },
    onLoad(options) {
        // 从页面参数中获取通知ID
        if (options && options.id) {
            // 加载通知详情内容
            this.loadAnnouncementDetail(options.id);
        }
    },
    methods: {
        // 返回上一页
        onBack() {
            uni.navigateBack();
        },

        // 加载通知详情
        async loadAnnouncementDetail(id) {
            try {
                // 显示加载提示
                uni.showLoading({ title: '加载中' });
                
                // 调用通知详情接口
                const res = await getInfo({ id });
                
                // 检查接口返回数据
                if (res.code === 200 && res.data) {
                    this.announcementDetail = {
                        id: res.data.id || 0,
                        title: res.data.title || '',
                        publishTime: res.data.publishTime || '',
                        content: res.data.content || ''
                    };
                } else {
                    console.error('获取通知详情失败:', res.message || '未知错误');
                    uni.showToast({ title: res.message || '获取通知详情失败', icon: 'none' });
                }
            } catch (error) {
                console.error('获取通知详情异常:', error);
                uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
            } finally {
                // 隐藏加载提示
                uni.hideLoading();
            }
        }
    }
};
</script>

<style scoped>
.container {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
}

/* 顶部导航栏样式 */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
    background-color: #ffffff;
    padding: 0 30rpx;
    border-bottom: 1px solid #e8e8e8;
}
.back-btn {
    width: 44rpx;
    height: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.back-icon {
    font-size: 36rpx;
    color: #333333;
}
.header-title {
    font-size: 32rpx;
    color: #333333;
    font-weight: bold;
}
.placeholder {
    width: 44rpx;
}

/* 内容区域样式 */
.content {
    background-color: #ffffff;
    padding: 40rpx;
}

/* 标题样式 */
.title-container {
    margin-bottom: 20rpx;
}
.title {
    font-size: 36rpx;
    color: #333333;
    font-weight: bold;
    line-height: 1.4;
}

/* 发布时间样式 */
.time-container {
    margin-bottom: 30rpx;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #e8e8e8;
}
.publish-time {
    font-size: 24rpx;
    color: #999999;
}

/* 富文本内容样式 */
.rich-text-container {
    font-size: 28rpx;
    color: #666666;
    word-break: break-word;
}
.rich-text-container :deep(p) {
    margin-bottom: 20rpx;
    line-height: 1.6;
}
.rich-text-container :deep(ul) {
    margin-bottom: 20rpx;
    padding-left: 40rpx;
}
.rich-text-container :deep(li) {
    margin-bottom: 10rpx;
    line-height: 1.6;
}
/* 富文本中的图片样式 - 确保图片适应屏幕宽度 */
.rich-text-container :deep(img) {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 20rpx auto;
}
/* 处理可能的表格样式 */
.rich-text-container :deep(table) {
    width: 100%;
    border-collapse: collapse;
    margin: 20rpx 0;
}
.rich-text-container :deep(table) {
    border: 1px solid #e8e8e8;
}
.rich-text-container :deep(th) {
    border: 1px solid #e8e8e8;
}
.rich-text-container :deep(td) {
    border: 1px solid #e8e8e8;
}
.rich-text-container :deep(th),
.rich-text-container :deep(td) {
    padding: 10rpx;
    text-align: left;
}
</style>